<template>
  <div class="expand">
    <div class="dataDictionary">
      <el-button type="success" @click="handleAddTop">添加顶级节点</el-button>
      <el-tree ref="expandMenuList" class="expand-tree" v-if="isLoadingTree" :data="setTree" node-key="id" highlight-current :props="defaultProps" :expand-on-click-node="false" :render-content="renderContent" :default-expanded-keys="defaultExpandKeys" @node-click="handleNodeClick"></el-tree>
    </div>

    <!-- 操作区域 -->
    <div>
      <el-input v-model="queryName" style="width:200px;" placeholder="请输入名称" prefix-icon="el-icon-search">
      </el-input>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="primary" @click="backTop">顶级节点列表</el-button>
    </div>

    <div class="childrenNodes">
      <el-table :data="childrenNodes" stripe :border=true element-loading-text="拼命加载中..." style="width: 100%;" max-height='400'>
        <el-table-column prop="name" label="节点名称">
        </el-table-column>
        <el-table-column prop="value" label="节点值">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="success" plain size="mini" @click="editorData(scope.row)">编辑</el-button>
            <el-button type="danger" plain size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="600px">
      <el-form :model="editFrom" ref="editFro" label-width="100px">
        <el-form-item label="节点名称" prop="name" :rules="[
            { required: true, message: '请输入节点名称', trigger: 'blur' }
          ]">
          <el-input v-model="editFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="节点值">
          <el-input v-model="editFrom.value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upLoadFrom">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<!-- VUE饿了么树形控件添加增删改功能按钮 -->
<script>
import TreeRender from "./tree_render";
export default {
  data() {
    return {
      isLoadingTree: false, //是否加载节点树
      setTree: [], //节点树数据
      defaultProps: {
        children: "childrens",
        label: "name"
      },
      defaultExpandKeys: [], //默认展开节点列表
      childrenNodes: [],
      num: 100,
      queryName: "",
      dialogVisible: false,
      editFrom: {
        name: "",
        value: "",
        description: "",
        sort: 0,
        tips: "",
        customType: 0,
        customAttributes: "",
        parentId: "",
        id: ""
      }
    };
  },
  mounted() {
    this.handleLoadTree();
  },
  methods: {
    backTop() {
      this.childrenNodes = this.setTree;
    },
    initExpand() {
      this.setTree.map(a => {
        this.defaultExpandKeys.push(a.id);
      });
      this.isLoadingTree = true;
    },
    handleNodeClick(d, n, s) {
      //点击节点
      this.childrenNodes = d.childrens;
      d.isEdit = false; //放弃编辑状态
    },
    renderContent(h, { node, data, store }) {
      //加载节点
      let that = this;
      return h(TreeRender, {
        props: {
          DATA: data,
          NODE: node,
          STORE: store
        },
        on: {
          nodeAdd: (s, d, n) => that.handleAdd(s, d, n),
          nodeEdit: (s, d, n) => that.handleEdit(s, d, n),
          nodeDel: (s, d, n) => that.handleDelete(s, d, n)
        }
      });
    },

    handleAddTop() {
      let _this = this;
      let data = {
        name: "新增节点" + ++_this.num
      };
      this.$api.post("/api/DataDictionary/InsertTree", data).then(rsp => {
        if (rsp != false) {
          _this.handleLoadTree();
        }
      });
    },

    handleAdd(s, d, n) {
      let _this = this;
      let num = ++this.num;
      let data = {
        pid: d.id,
        name: "新增节点" + num
      };
      this.$api.post("/api/DataDictionary/InsertTree", data).then(rsp => {
        if (rsp != false) {
          _this.handleLoadTree();
        }
      });
    },

    handleEdit(s, d, n) {
      debugger
      //编辑节点
      let that = this;
      let data = {
        name: d.name,
        value: "",
        id: d.id
      };
      this.$api.post("/api/DataDictionary/update", data,true).then(rsp => {
        if (rsp != false) {
          that.handleLoadTree();
        }
      });
    },

    handleDelete(s, d, n) {
      //删除节点
      let that = this;
      //有子级不删除
      if (d.children && d.children.length !== 0) {
        this.$message.error("此节点有子级，不可删除！");
        return false;
      } else {
        that
          .$confirm("是否删除此节点？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            let data = {
              dataDicId: d.id
            };
            this.$api.post("/api/DataDictionary/delete", data).then(rsp => {
              if (rsp != false) {
                that.childrenNodes.splice(s, 1);
                that.handleLoadTree();
              }
            });
          })
          .catch(() => {
            return false;
          });
      }
    },

    handleLoadTree() {
      //获取节点数据
      let _this = this;
      this.$api.get("/api/DataDictionary/GetDataDicAll", null).then(rsp => {
        if (rsp != false) {
          _this.setTree = rsp.data;
          _this.childrenNodes = rsp.data;
          _this.initExpand();
        }
      });
    },

    handleQuery() {
      //查找节点
      let _this = this;
      let expression = this.queryName;
      this.$api
        .get("/api/DataDictionary/getDicByExpr", {
          expression: expression
        })
        .then(rsp => {
          if (rsp != false) {
            _this.childrenNodes = rsp.data;
          }
        });
    },

    editorData(row) {
      //列表编辑
      this.editFrom.name = row.name;
      this.editFrom.value = row.value;
      this.editFrom.id = row.id;
      this.dialogVisible = true;
    },

    upLoadFrom() {
      this.dialogVisible = false;
      let that = this;
      let data = {
        name: this.editFrom.name,
        value: this.editFrom.value,
        id: this.editFrom.id
      };
      this.$api.post("/api/DataDictionary/update", data,true).then(rsp => {
        if (rsp != false) {
          that.handleLoadTree();
        }
      });
    }
  }
};
</script>

<style>
.expand {
  padding: 0 25px;
  overflow: hidden;
}
.expand-tree {
  width: 98%;
  margin-bottom: 5px;
}
.expand > div::-webkit-scrollbar-track {
  border-radius: 5px;
}
.expand > div::-webkit-scrollbar-thumb {
  background-color: rgba(50, 65, 87, 0.5);
  outline: 1px solid slategrey;
  border-radius: 5px;
}
.expand > div::-webkit-scrollbar {
  width: 10px;
}
.expand-tree {
  border: none;
  margin-top: 10px;
}
.expand-tree .el-tree-node.is-current,
.expand-tree .el-tree-node:hover {
  overflow: hidden;
}
.expand-tree .is-current > .el-tree-node__content .tree-btn,
.expand-tree .el-tree-node__content:hover .tree-btn {
  display: inline-block;
}
.expand-tree .is-current > .el-tree-node__content .tree-label {
  font-weight: 600;
  white-space: normal;
}
.dataDictionary {
  /* display:inline-block; */
  float: left;
  width: 30%;
  height: auto;
}
.childrenNodes {
  /* display:inline-block; */
  float: left;
  width: 70%;
  margin-top: 10px;
}
</style>